<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>商品名称</th>
                <th>单价</th>
            </tr>
        </thead>
        <tbody id="tb"></tbody>
    </table>


    <script>
        // //模板字符串 反引号``

        // var info = `beijing`;
        // console.log(info);
        // console.log(typeof info);


        // var name = 'rose', age = 18;
        // var info = `I am a student,my name is ${name},my age is ${age}`;
        // console.log(info);   //I am a student,my name is rose,my age is 18


        // var stu = { name: 'rose', age: 18 };
        // var info = `I am a student,my name is ${stu.name},my age is ${stu.age}`;
        // console.log(info);

        // var stu = { name: 'rose', age: [17, 18] };
        // var info = `I am a student,my name is ${stu.name},my age is ${stu.age[0]}`;
        // console.log(info);


        //可换行
        var goods = [
            { no: 1, name: 'meidi', price: 3000 },
            { no: 2, name: 'geli', price: 4000 }
        ]
        var html = '';
        for (var i = 0; i < goods.length; i++) {
            //html += '<tr><td>' + goods[i].no + '</td><td>' + goods[i].name + '</td><td>' + goods[i].price + '</td></tr>'
            html += `<tr>
                <td>${goods[i].no}</td>
                <td>${goods[i].name}</td>
                <td>${goods[i].price}</td>
                </tr>`
        }
        document.querySelector('#tb').innerHTML = html;


    </script>
</body>

</html>